<template>
	<u-overlay :show="show" :opacity="0.7">
		<u-icon name="close" color="#fff" size="24" class="close_button" @click="hideOverlay"></u-icon>
		<video v-if="show" id="myVideo" :src="url" autoplay></video>
	</u-overlay>
</template>

<script setup lang="ts" name="VideoShow">
import { nextTick, ref, toRefs, watch } from 'vue';
const emit = defineEmits(['changeVideoShow']);

const props = defineProps({
	url: {
		type: String,
		default: ''
	},
	show: {
		type: Boolean,
		default: true
	},
});

const { url, show } = toRefs(props);

function hideOverlay() {
	emit("changeVideoShow", false);
}
</script>

<style>
#myVideo {
	width: 100% !important;
	position: absolute!important;
	top: 50%!important;
	transform: translateY(-50%)!important;
}
.close_button {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 200;
}
</style>